<template>
    <div>
        <!--<el-row>-->
        <!--    <el-col :span="4" :offset="16">-->
        <!--        &lt;!&ndash;通过vuex获取用户名&ndash;&gt;-->
        <!--        <h4>{{$store.getters.getUname}}{{$store.state.uname}}{{uname}}</h4>-->
        <!--    </el-col>-->
        <!--</el-row>-->
        <!--layout布局，每行24分格-->
        <el-row>
            <el-col :span="15">
                <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="交通工具名称">
                        <el-input v-model="queryMap.name" placeholder="交通工具名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryTransportation">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addTransportation">新增</el-button>
                <el-button type="primary" @click="updateTransportation">修改</el-button>
                <el-button type="primary" @click="delTransportation">删除</el-button>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="transportationData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="id"
                label="交通工具id"
                width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="交通工具名称"
                width="120">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
        </el-table>
        <!--        分页栏
                background  背景色
                layout  分页栏的显示内容
                page-sizes  代表每页显示条数的下拉框
                total  代表总条数
                 @size-change 每页显示条数切换时触发
                 @current-change 页码切换时触发
                 current-page 代表参数page
                 :page-size 代表参数limit-->
        <el-pagination
            background
            @size-change="getSize"
            @current-change="getCurrent"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :total="total">
        </el-pagination>

        <!--新增以及修改的弹出框-->
        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
            <el-form ref="eForm" :model="transportationForm" label-position="right" :rules="rules">
                <el-form-item label="交通工具id" :label-width="formLabelWidth" v-show="isIdShow">
                    <el-input v-model="transportationForm.id" autocomplete="off" style="width: 400px"
                              :disabled="isIdDisabled"></el-input>
                </el-form-item>
                <el-form-item label="交通工具名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="transportationForm.name" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTransportation">确 定</el-button>
                <el-button @click="resetForm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "TransportationList",
    data() {
        return {
            //uname: this.$store.getters.getUname,
            uname: '',

            transportationData: [],  //表格数据
            queryMap: {
                page: 1,
                limit: 10,
                name: '',
            },
            /*分页信息*/
            total: 0,  //数据总条数
            checkData: [],  //选中的数据
            formTitle: "新增员工",  //弹出框的标题
            dialogFormVisible: false,  //控制弹出框显隐的值
            formLabelWidth: '120px',  //文本显示宽度
            transportationForm: {
                id: 0,
                name: ''
            },
            isIdShow: true,

            rules: {
                name: [
                    {required: true, message: "请输入员工姓名", trigger: "blur"}
                ]
            },
            isIdDisabled: true
        }
    },
    methods: {
        /**
         * 表格的选中项发生变化时触发
         * @param val
         */
        handleSelectionChange(val) {
            //val是个数组对象，代表目前选中的表格数据
            console.log(val)
            this.checkData = val
        },

        /**
         * 加载表格中的员工信息
         */
        getTransportationData() {
            //调用后台，获取数据
            this.$http.post("/transportation/transportationList", this.queryMap).then(res => {
                console.log(res)
                //res.data  对应的是后台的return值
                this.transportationData = res.data.data  //列表数据
                this.total = res.data.count  //总条数
            })
        },

        /**
         * 查询表格数据
         */
        queryTransportation() {
            //重新从第一页开始显示
            this.queryMap.page = 1
            this.getTransportationData()
        },

        /**
         * 每页显示条数发生变化时触发
         * @param val  代表的是当前的每页显示条数
         */
        getSize(val) {
            this.queryMap.limit = val
            this.getTransportationData()
        },
        /**
         * 当前页码发生变化时触发
         * @param val  代表的是当前的page值
         */
        getCurrent(val) {
            this.queryMap.page = val
            this.getTransportationData()
        },
        /**
         * 删除员工数据
         */
        delTransportation() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要删除的数据")
                return
            }
            //确认删除
            this.$confirm('确定要删除选中的数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定后执行的动作
                //执行删除动作
                let ids = []
                for (let i = 0; i < this.checkData.length; i++) {
                    ids[i] = this.checkData[i].id
                }
                //调用后台
                this.$http.post("/transportation/delTransportation", ids).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        //重新加载表格数据
                        this.getTransportationData()
                    }
                })
            }).catch(() => {  //点击取消后执行的动作
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /**
         * 新增员工信息
         */
        addTransportation() {
            this.isIdShow = false
            this.dialogFormVisible = true
        },
        /**
         * 保存新增员工信息
         */
        saveTransportation() {
            //表单验证
            this.$refs['eForm'].validate((valid) => {
                //如果校验都通过，那么valid为true
                if (valid) {
                    //请求后台。传递表单数据进行保存
                    if (this.transportationForm.id === 0) {
                        //新增操作
                        this.$http.post("/transportation/addTransportation", this.transportationForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("新增成功")
                                this.getTransportationData()
                                this.dialogFormVisible = false
                                //清空表单数据以及提示信息
                                this.transportationForm = {
                                    id: 0,
                                    name: ''
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                    else {
                        //编辑操作
                        this.$http.post("/transportation/updateTransportation", this.transportationForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("修改成功")
                                this.getTransportationData()
                                this.dialogFormVisible = false
                                //清空表单数据以及提示信息
                                this.transportationForm = {
                                    id: 0,
                                    name: ''
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 修改员工信息
         */
        updateTransportation() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要修改的员工信息")
                return
            }
            if (this.checkData.length > 1) {
                this.$message.warning("只能选择一条员工信息进行修改")
                return
            }

            //根据员工编号查询员工信息
            let id = this.checkData[0].id
            this.$http.get("/transportation/getTransportation/" + id).then(res => {
                this.transportationForm = res.data
                this.dialogFormVisible = true
                this.formTitle = "修改员工信息"
            })
        },
        /**
         * 清空表单数据
         */
        resetForm() {
            this.dialogFormVisible = false
            this.transportationForm = {
                id: 0,
                name: ''
            }
            this.$refs['eForm'].resetFields()
        }
    },
    mounted() {
        //可以访问sessionStorage对象获取数据
        this.uname = sessionStorage.getItem("uname")

        //初始加载表格数据
        this.getTransportationData()
    }
}
</script>

<style scoped>

</style>